<template>
  <div id="charge">
    <div class="c-box">
      <div>收费管理/抄表周期管理</div>
      <h3>抄表周期管理</h3>
      <div class="border">
        <div>
          <span class="project"
            >仪表名称
            <el-input v-model="input" placeholder="请输入" />
          </span>
        </div>
        <div style="margin-right: 30px">
          <el-button type="primary" @click="getData()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </div>
      </div>
    </div>

    <div class="c-box2">
      <div class="button">
        <p>周期列表</p>
        <div>
          <el-button type="primary" @click="dialogFormVisible = true"
            >+&nbsp;&nbsp;新建</el-button
          >
          <el-button>批量操作</el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55" prop="cycleId" />
        <el-table-column prop="meterName" label="仪表名称" width="100" />
        <el-table-column prop="service" label="收费项目" width="100" />
        <el-table-column prop="cycle" label="抄表周期" width="120" />
        <el-table-column prop="startTime endTime" label="起止日期" width="220">
          <template #default="scope">
            {{ scope.row.startTime.split(' ')[0] }}~{{
              scope.row.endTime.split(' ')[0]
            }}
          </template>
        </el-table-column>
        <el-table-column prop="employeeName" label="创建人" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="220" />
        <el-table-column label="操作">
          <template #default="scope">
            <router-link to="/home/meterDetail">
              <el-button size="small">明细</el-button>
            </router-link>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="新建抄表周期">
      <el-form :model="form">
        <el-form-item label="抄表小区" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" width="120px" />
        </el-form-item>
        <el-form-item label="仪表名称" :label-width="formLabelWidth">
          <el-input v-model="form.meterCode" autocomplete="off" width="120px" />
        </el-form-item>
        <el-form-item label="抄表月份" :label-width="formLabelWidth">
          <el-input v-model="form.cycle" autocomplete="off" width="120px" />
        </el-form-item>
        <!-- 日期 -->
        <el-form-item label="起止日期" required>
          <el-date-picker
            value-format="YYYY-MM-DD HH:mm:ss"
            v-model="form.date"
            type="daterange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="add"> Confirm </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
#charge {
  background: #f0f2f5;
  height: 600px;
  width: 100%;
  a {
    text-decoration: none;
  }
  /deep/.el-dialog {
    width: 600px;
  }
  h3 {
    margin: 20px 0;
  }
  .c-box {
    height: 150px;
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;

    border: 1px solid #e9e9e9;
    background-color: #fff;

    .border {
      height: 50px;
      width: 100%;
      border-top: 1px solid #e9e9e9;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;

      .el-input {
        width: 280px;
        margin: -3px 3px 3px 6px;
      }
    }
  }
  .c-box2 {
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;
    border: 1px solid #e9e9e9;
    background-color: #fff;
    .footer {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .button {
      display: flex;
      justify-content: space-between;
      margin-right: 30px;
      .el-button {
        width: 95px;
        border-radius: 2px;
      }
    }
    .el-table {
      margin-top: 30px;
      .el-button {
        border: 0;
        background: white;
        color: #1890ff;
      }
    }
  }
}
</style>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, onMounted, reactive } from 'vue';
import Page from '../../components/Page.vue';
import axios from '../../utils/http';
const size = ref<'' | 'large' | 'small'>('');
const input = ref('');
const count = ref(5);
const page = ref(1);
const total = ref(0);
const tableData = ref([]);
const dialogFormVisible = ref(false);
const formLabelWidth = '100px';

const form = reactive({
  name: '',
  date: [],
  cycle: '',
  meterCode: 0,
});
const add = () => {
  axios({
    url: '/meterCycle/add',
    method: 'post',
    data: {
      createTime: '',
      cycle: '',
      cycleId: 0,
      endTime: '',
      itemId: 0,
      meterCode: 0,
      startTime: '',
      userId: 0,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      dialogFormVisible.value = false;
      ElMessage.success('添加成功');
      getData();
    } else {
      ElMessage.error('添加失败');
    }
  });
};
const delAll = () => {
  axios({
    url: '/meterCycle/ids/delete',
    method: 'delete',
    data: {
      // ids: id.value,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      ElMessage.success('删除成功');
      getData();
    } else {
      ElMessage.error('删除失败');
    }
  });
};
const handleDelete = (row: { cycleId: number }) => {
  axios({
    url: '/meterCycle/delete',
    method: 'delete',
    params: {
      id: row.cycleId,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      ElMessage.success('删除成功');
      getData();
    } else {
      ElMessage.error('删除失败');
    }
  });
};
const getData = () => {
  axios({
    url: '/meterCycle/list',
    method: 'get',
    params: {
      page: page.value,
      limit: count.value,
      meterName: input.value,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      tableData.value = data.data;
      total.value = data.total;
    } else {
      ElMessage.error('加载失败！');
    }
  });
};
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  console.log(val);
  getData();
};
const reset = () => {
  input.value = '';
  getData();
};
onMounted(() => {
  getData();
});
</script>
